﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="word.aspx.cs" Inherits="www.pages.word.word" ValidateRequest="false" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../../css/lanai-ui.min.css" rel="stylesheet" />
    <style type="text/css">
        .tag {
            position: relative;
            margin-top: 5px;
            margin-right: 5px;
            float: left;
        }
    </style>
</head>
<body>
    <section class="content">
        <form id="form1" runat="server">
            <div class="row">
                <div class="col-sm-6">
                    <div class="box box-default no-border no-shadow">
                        <div class="box-body no-pad-top">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>标题(<span class="text-red">*</span>)</label>
                                        <input id="txt_doc_name" type="text" class="form-control" runat="server" />
                                    </div>
                                </div>
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label>描述</label>

                                        <div class="input-group">
                                            <input id="txt_doc_comment" type="text" class="form-control" runat="server" />
                                            <div class="input-group-btn">
                                                <button id="btnsave" type="button" class="btn btn-default">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <textarea id="editor1" name="editor1" rows="20" cols="80" runat="server">
                                   Word内容模板.
                            </textarea>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <asp:Repeater ID="listTags" runat="server">
                        <HeaderTemplate>
                            <div class="box box-default no-border">
                                <div class="box-body">
                                    <div id="external-events">
                        </HeaderTemplate>
                        <ItemTemplate>
                            <%=showTags(Eval("tag_id").ToString(),Eval("tag_name").ToString(),Eval("tag_comment").ToString(),Eval("tag_content").ToString(),Eval("tag_color").ToString(),Eval("tag_type").ToString()) %>
                        </ItemTemplate>
                        <FooterTemplate>
                            </div>
                        </div>
                    </div>
                        </FooterTemplate>
                    </asp:Repeater>
                    <div class="box box-default no-border no-shadow">
                        <div class="box-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <ul class="fc-color-picker" id="color-chooser">
                                        <li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
                                        <li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
                                        <li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
                                        <li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
                                        <li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
                                        <li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
                                        <li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li>
                                        <li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li>
                                        <li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
                                        <li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
                                        <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
                                        <li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
                                        <li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>标签名称(<span class="text-red">*</span>)</label>
                                        <input id="txt_tag" type="text" class="form-control" />
                                    </div>
                                </div>
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label>描述</label>
                                        <div class="input-group">
                                            <input id="txt_tag_remark" type="text" class="form-control" />
                                            <div class="input-group-btn">
                                                <button id="btnsaveTag" type="button" class="btn btn-default">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <label>标签内容</label>
                            <textarea id="editor2" name="editor2" rows="10" cols="80">
                                    标签替换内容.
                            </textarea>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" id="hid_Project" runat="server" />
            <input type="hidden" id="hid_document" runat="server" />
            <input type="hidden" id="hid_tag" />
        </form>
    </section>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../plugins/ckeditor/ckeditor.js"></script>
    <script src="../../plugins/ckfinder/ckfinder.js"></script>
    <script src="../../js/lanai-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var height = $(document).height() - 220;
            var masterEditor = CKEDITOR.replace('editor1', { height: height });
            var tagEditor = CKEDITOR.replace('editor2', { toolbarCanCollapse: true, toolbarStartupExpanded: false, height: 280 });
            var currColor = '#3c8dbc';

            CKFinder.setupCKEditor(masterEditor, '../../plugins/ckfinder/');

            function init_events(ele) {
                ele.each(function () {
                    var eventObject = {
                        tagid: $.trim($(this).data("tagid")),
                        title: $.trim($(this).text()),
                        remark: $.trim($(this).data("remark")),
                        content: $.trim($(this).data("content")),
                        color:$.trim($(this).data("color"))
                    }
                    $(this).data('eventObject', eventObject)

                    $(this).on('dblclick', function () {
                        masterEditor.insertHtml("<span class='marker'>[#" + $(this).data('eventObject').title + "#]</span>");
                    })
                    $(this).on('click', function () {
                        currColor = $(this).data('eventObject').color;
                        $("#hid_tag").val($(this).data('eventObject').tagid);
                        $("#txt_tag").val($(this).data('eventObject').title);
                        $("#txt_tag_remark").val($(this).data('eventObject').remark);
                        tagEditor.setData($(this).data('eventObject').content);
                        $('#btnsaveTag').css({ 'background-color': currColor, 'border-color': currColor, 'color': '#fff' })
                    })
                })
            }
            init_events($('#external-events div.external-event'));

            $('#color-chooser > li > a').click(function (e) {
                e.preventDefault()
                currColor = $(this).css('color')
                $('#btnsaveTag').css({ 'background-color': currColor, 'border-color': currColor, 'color': '#fff' })
            });

            $("#btnsave").click(function () {
                var id = $("#hid_document").val();
                var name = $("#txt_doc_name").val();
                var comment = $("#txt_doc_comment").val();
                var template = masterEditor.document.getBody().getHtml();
                if (name == "") {
                    parent.layer.alert("请输入文档名称", { title: '系统提示', icon: 2 });
                    return;
                }

                parent.doSaveDocument(id, name, comment, template);
            });

            $("#btnsaveTag").click(function () {
                var project=$("#hid_Project").val();
                var document = $("#hid_document").val();                
                var id = $("#hid_tag").val();
                var name = $("#txt_tag").val();
                var comment = $("#txt_tag_remark").val();
                var content = tagEditor.document.getBody().getHtml();
                var color = $(this).css("background-color");

                if (name == "") {
                    parent.layer.alert("请输入标签名称", { title: '系统提示', icon: 2 });
                    return;
                }

                var param = {};
                param["function_type"] = "addTag";
                param["project"] =project;
                param["document"] =document;
                param["id"] =id;
                param["name"] =name;
                param["comment"] =comment;
                param["content"] =content;
                param["color"] =color;

                $.post("/api/", param, function (res) {

                });
            });
        })
    </script>
</body>
</html>
